<template>
    <scroll-view class="apply-view" scroll-y>
        <view class="apply-view-form">
        <u-form
            labelPosition="top"
            labelWidth="140"
            :model="formModel"
            ref="formRef"
        >
        <u-form-item label="姓  名" prop="name" key="name">
            <u-input v-model="formModel.name" :adjust-position="true"></u-input>
        </u-form-item>
        <u-form-item label="身份证号码" prop="idCard" key="idCard">
            <u-input v-model="formModel.idCard" :border="false" :adjust-position="true"></u-input>
        </u-form-item>
        <u-form-item label="咨询类型" prop="type">
            <Select v-model:value="formModel.type" :options="type == 0 ? typeOptions : typeOptions2"></Select>
        </u-form-item>
        <u-form-item label="标  题" prop="title">
            <u-input v-model="formModel.title" :maxlength="20" placeholder="例：（与彭州市XX的合同纠纷）" type="textarea" :height="36" :adjust-position="true"></u-input>
        </u-form-item>
        <u-form-item label="问  题" prop="content">
            <u-input v-model="formModel.content" type="textarea" :adjust-position="true" :maxlength="500"
            placeholder="请详细填写反应问题的时间、地址、主要内容及您的诉求（500字以内）"></u-input>
        </u-form-item>
        <u-form-item label="上传图片(选填)">
            <view>
                <u-upload ref="uploadRef" :action="action" :max-count="5" :max-size="10 * 1024 * 1024"
                :limitType="['jpg', 'bmp', 'gif', 'png', 'jpeg']" @on-success="uploadSuccess" :before-remove='handleRemove'></u-upload>
                <view style="font-size: 24rpx;height: 24px;">最多上传5张图片，每张小于10Mb</view>
                <view style="font-size: 24rpx;height: 24px;">格式可选：jpg、bmp、gif、png、jpeg</view>
            </view>
        </u-form-item>
        <u-form-item label="联系方式" prop="contactInfo">
            <view class="flex">
                <u-input style="flex: 1;" v-model="formModel.contactInfo" type="number" :adjust-position="true"></u-input>
                <button class="get-phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
            </view>
        </u-form-item>
        <view class="apply-tip">
            为了方便对反应问题的开展调查、核实、反馈，请正确填写联系方式等信息，平台将对您的个人信息严格保密！
        </view>
        <view class="submit-btn">
            <u-button type="primary" custom-style="background: #19428A" shape="circle" @click="hanldeSubmit">确认信息无误，提交</u-button>
        </view>
        </u-form>
    </view>
    </scroll-view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref, getCurrentInstance } from 'vue';
import Select from '@/components/basicForm/src/components/Select.vue';
import { submit, deleteFile, phoneNumber } from '@/api'
import { upload } from '@/utils/uploadHttp';
import { uploadAddress } from '@/config/test';
// legal 0  shiwu 1
const type:any = ref('0')
const uploadRef = ref()
const formModel:any = ref({})
const formRef = ref()
const instance = getCurrentInstance()
const typeOptions = ref([
    {
        label: '合规建设指导',
        value: '1'
    },
    {
        label: '合同纠纷',
        value: '2'
    },
    {
        label: '劳动争议',
        value: '3'
    },
    {
        label: '其他',
        value: '4'
    }
])
const typeOptions2 = ref([
    {
        label: '政法系统领导面对面',
        value: '5'
    },
    {
        label: '执法监督',
        value: '6'
    },
    {
        label: '法治体检',
        value: '7'
    },
    {
        label: '法律援助',
        value: '8'
    },
    {
        label: '公证服务',
        value: '9'
    },
    {
        label: '检察听证',
        value: '10'
    },
    {
        label: '其他',
        value: '11'
    }
])
const fileList:any = ref([])
const action = ref(uploadAddress)
console.log(action)
const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: ['change', 'blur'] },
        { pattern: /^[\u4e00-\u9fa5]*$/g, message: '只能包含中文', trigger: ['change', 'blur']}
    ],
    contactInfo: [
        { required: true, message: '请输入手机号', trigger: ['change', 'blur'] },
        {
			// 自定义验证函数，见上说明
			validator: (rule, value, callback) => {
				// 上面有说，返回true表示校验通过，返回false表示不通过
				// this.$u.test.mobile()就是返回true或者false的
				return instance.proxy.$u.test.mobile(value);
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
    ],
    idCard: [
        { required: true, message: '请输入身份证', trigger: ['change', 'blur'] },
    ],
    type: [
        { required: true, message: '请选择咨询类型', trigger: ['change', 'blur'] }
    ],
    title: [
        { required: true, message: '请输入标题', trigger: ['change', 'blur'] },
    ],
    content: [
        { required: true, message: '请输入问题', trigger: ['change', 'blur'] },
    ]
}
onMounted(() => {
    formRef.value.setRules(rules)
})
const uploadSuccess = (data, index, lists, name) => {
    fileList.value = []
    console.log(data, index, lists, name)
    fileList.value = lists.filter((item:any, index:number) => {
        if (item.response && item.response.code == 200) {
            return true
        } else {
            uploadRef.value.remove(index)
            uni.showToast({
                title: '上传失败',
                icon: 'error'
            })
        }
    }).map(item => ({
        ...item,
        url: item.response.data.fileUrl || '1',
        fileName: item.response.data.fileName
    }))
    console.log(fileList.value, 'fileList')
}
const handleRemove = async (index, lists, name) => {
    console.log(index, lists, name)
    const params = [fileList.value[index].fileName]
    try {
        await deleteFile(params)
        fileList.value = lists
    return true
    } catch{
        return false
    }
   
}
const getPhoneNumber = (e) => {
    console.log(e.detail.code)  // 动态令牌
    phoneNumber({
        code: e.detail.code
    }).then(res => {
        console.log(res, 'res')
        formModel.value.contactInfo = res
    })
    // https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
}
const hanldeSubmit = async () => {
    const params = {
        ...formModel.value,
        litigationType: type.value,
        imageUrlList: fileList.value.map((item:any) => item.fileName)
    }
    formRef.value.validate(async (valid) => {
        if (valid) {
            await submit(params)
            uni.navigateTo({
                url: '/applySubPackage/apply-success'
            })
        }
    })
}
onLoad((props) => {
    type.value = props.type
})
</script>

<style lang="scss">
.apply-view{
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    background: url('https://7072-prod-3gyndjxs02add8b0-1379203838.tcb.qcloud.la/static/img3.png') no-repeat left top;
    background-size: 100% 100%;
    padding: 24rpx;
    .apply-view-form{
        background: #F2F2F2 !important;
        border-radius: 24rpx;
        padding: 24rpx ;
        .u-form-item{
            background: transparent;
        }
        .u-form-item--left__content__label{
            font-weight: 700;
        }
         .u-input{
            .uni-input-input{
                border: none !important;
                background: transparent !important;
            }
        }
        .u-form-item--left{
            margin-bottom: 0;
        }
        .u-border-bottom:after{
            border-color: #dcdddd;
        }
        .u-cell {
            background: #dcdddd !important;
        }
        .u-list-item{
            border: 1px dashed #dcdddd;
        }
        .apply-tip{
            margin: 32rpx 0 64rpx;
        }
    }
    .flex{
        display: flex;
        justify-content: space-between;
    }
    .get-phone{
        padding: 0 40rpx;
        line-height: 72rpx;
        background: #19428A;
        outline: none;
        color: #fff;
        margin: 0;
        font-size: 28rpx;
    }
}
</style>